<!--
 * @Autor: 黄旗
 * @Date: 2020-07-09 14:28:02
-->
<template>
    <div>
        <Modal v-model="showModal" title="钉钉二维码" width="330">
            <span slot="footer"></span>
            <div id="login_container"></div>
        </Modal>
    </div>
</template>

<script>
export default {
    name: "dingCode",
    data() {
        return {
            showModal: false,
            appId: process.env.VUE_APP_DING,
            redirectUrl: process.env.VUE_APP_REDIRECT,
        };
    },
    mounted() {
    },
    methods: {
        _dingInit(page) {
            DDLogin({
                id: "login_container",
                goto: encodeURIComponent(
                    "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=" +
                        this.appId +
                        "&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" +
                        this.redirectUrl +
                        page
                ),
                style: "border:none;background-color:#FFFFFF;",
                width: "300",
                height: "300",
            });
            let hanndleMessage = function (event) {
                let origin = event.origin;
                if (origin === "https://login.dingtalk.com") {
                    let loginTmpCode = event.data;
                    let url =
                        "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=" +
                        this.appId +
                        "&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" +
                        this.redirectUrl +
                        "&loginTmpCode=" +
                        loginTmpCode;
                    window.location.href = url;
                }
            };
            if (typeof window.addEventListener !== "undefined") {
                window.addEventListener("message", hanndleMessage, false);
            } else if (typeof window.attachEvent !== "undefined") {
                window.attachEvent("onmessage", hanndleMessage);
            }
        },
        show(page) {
            this.showModal = true;
            this._dingInit(page);
        },
    },
};
</script>

<style scoped></style>
